<template>
	<div id="cart-list-item">
		<div class="item-selector">
			<check-button :is-checked="itemInfo.checked" @click.native="checkClick"/>
		</div>
	
		<div class="item-img">
			<img :src="itemInfo.image" alt="商品图片">
		</div>
		<div class="item-info">
			<div class="item-title">{{itemInfo.title}}</div>
			<div class="item-desc">{{itemInfo.desc}}</div>
			<div class="info-bottom">
				<div class="item-price-left">{{itemInfo.price}}</div>
				<div class="item-count-right">x{{itemInfo.count}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import CheckButton from 'components/content/checkButton/CheckButton.vue'
	export default{
		name:'CartListItem',
		components: {
			CheckButton
		},
		props: {
			itemInfo:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		methods: {
			checkClick(){
				this.itemInfo.checked = !this.itemInfo.checked
			}
		}
	}
</script>

<style scoped>
	#cart-list-item{
		width: 100%;
		display: flex;
		font-size: 0;
		padding: 5px;
		border-bottom: 1px solid #ccc;
	}
	.item-selector{
		width: 14%;
		display: flex;
		justify-content: center;
		align-items: center;		
	}
 	.item-img{
		padding: 5px;
	}
	.item-img img{
		width: 80px;
		height: 100px;
		border-radius: 5px;
	}
	.item-info{
		font-size: 17px;
		color: #333;
		padding: 5px 10px;
		position: relative;
		overflow: hidden;
	}
	.item-desc,
	.item-title{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.item-info{
		font-size: 16px;
		color: #666;
		}
	.item-desc{
		font-size: 13px;
		margin-top: 10px;
	}
		.info-bottom{
			margin-top: 10px;
			position: absolute;
			bottom:-2px;
			left: 10px;
			right: 10px;
		}
		.item-price-left{
			color: orangered;
			float: left;
		}
		.item-count-right{
			float: right;
		}
		.item-count-right, .item-price-left{
			padding: 15px 0;
		}
		
</style>
